<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8' />
  <title>Measure distances</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script include="jquery" src="../.././static/libs/include-lib-local.js"></script>
  <script include="geohash,geojson,turf" src="../.././static/libs/include-leaflet-local.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id='map'></div>
  <script>
    var map = L.map('map').setView([30.59418345, 114.289398], 11);
    var origindata = {
      "type": "FeatureCollection",
      "features": [{
          "type": "Feature",
          "properties": {},
          "geometry": {
            "type": "Point",
            "coordinates": [114.24270629882811,30.622550184776674]
          }
        },
        {
          "type": "Feature",
          "properties": {},
          "geometry": {
            "type": "LineString",
            "coordinates": [
              [114.34810638427734,30.634958017061198],
              [114.2856216430664,30.554869984737515],
              [114.246826171875,30.4954261715298]
            ]
          }
        },
        {
          "type": "Feature",
          "properties": {},
          "geometry": {
            "type": "Polygon",
            "coordinates": [
              [
                [114.33815002441406,30.502230042106245],
                [114.34398651123045,30.485071542395932],
                [114.3728256225586,30.472348632640834],
                [114.38278198242188,30.49010107130931],
                [114.35256958007811,30.50518809826035],
                [114.33815002441406,30.502230042106245]
              ]
            ]
          }
        }
      ]
    };
    var geojson;

    initMap();
    loadData();

    function initMap() {
      L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' +
        'sk.eyJ1IjoiY2hlbmdkYWRhIiwiYSI6ImNqZDFjaGo0ZjFzcnoyeG54enoxdnNuZHUifQ.hTWXXBUQ0wdGeuDF3GWeUw', {
          attribution: '<a href="#">MapGIS</a>',
          maxZoom: 18,
          id: 'mapbox.light'
        }).addTo(map);
    }

    function loadData() {
      L.geoJson(origindata).addTo(map);
      geojson = turf.buffer(origindata, 1.5, {
        units: 'miles'
      });
      L.geoJson(geojson).addTo(map);
    }

  </script>

</body>

</html>
